<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能家居控制中心</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='/css/style.css') }}">
</head>
<body>
    <div class="dashboard">
        <h1><i class="fas fa-home"></i> 智能家居控制中心</h1>

        <div class="grid">
            <!-- 客厅灯 -->
            <div class="card light">
                <h2><i class="fas fa-lightbulb"></i> 客厅灯</h2>
                <div class="controls">
                    <button class="btn on" data-device="living_room_light" data-action="1">开启</button>
                    <button class="btn off" data-device="living_room_light" data-action="0">关闭</button>
                </div>
                <div class="status"></div>
            </div>

            <!-- 二楼灯 -->
            <div class="card light">
                <h2><i class="fas fa-lightbulb"></i> 二楼灯</h2>
                <div class="controls">
                    <button class="btn on" data-device="second_floor_light" data-action="1">开启</button>
                    <button class="btn off" data-device="second_floor_light" data-action="0">关闭</button>
                </div>
                <div class="status"></div>
            </div>

            <!-- 风扇 -->
            <div class="card fan">
                <h2><i class="fas fa-fan"></i> 风扇</h2>
                <div class="controls">
                    <button class="btn on" data-device="fan" data-action="1">开启</button>
                    <button class="btn off" data-device="fan" data-action="0">关闭</button>
<!--                    <div class="speed-control">-->
<!--                        <span>风速：</span>-->
<!--                        <select id="fanSpeed">-->
<!--                            <option value="1">一档</option>-->
<!--                            <option value="2">二档</option>-->
<!--                            <option value="3">三档</option>-->
<!--                        </select>-->
<!--                    </div>-->
                </div>
                <div class="status"></div>
            </div>

            <!-- 人脸识别 -->
            <div class="card face">
                <h2><i class="fas fa-user-check"></i> 人脸识别</h2>
                <div class="controls">
                    <button class="btn toggle" id="faceAuth" data-device="face_recognition" data-action="1">
                        <span>启动识别</span>
                    </button>
                </div>
            </div>


            <!-- 视频监控 -->
            <div class="card video" style = "padding-bottom: 57px;">
                <h2><i class="fas fa-user-check" style="padding-bottom: 20px;"></i> 视频监控</h2>
                <div class="controls">
<!--                    <iframe src="http://192.168.234.77:8080/?action=stream" scrolling="auto" frameborder="0" style="width:100%; height:100%; border:none;"></iframe>-->
                    <img style="display: block;-webkit-user-select: none;height: 252px; width:100%; height:100%; transform: rotate(270deg);" src="http://192.168.239.77:8080/?action=stream">
                </div>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='/js/jquery3.7.1.js') }}"></script>
    <script src="{{ url_for('static', filename='/js/script.js') }}"></script>
    <script src="{{ url_for('static', filename='/js/refresh.js') }}"></script>
</body>
</html>